<template>
  <page-container>
    <!-- 派出所报告导出 -->
    <a-card size="small" style="text-align: center">
      <a-radio-group v-model:value="view" button-style="solid" @change="viewChange">
        <a-radio-button value="1">自定义报告导出</a-radio-button>
        <a-radio-button value="2">月报告导出</a-radio-button>
      </a-radio-group>
      <a-button @click="templateClick" style="float: right">
        <template #icon>
          <download-outlined />
        </template>
        模板下载
      </a-button>
    </a-card>
    <a-card size="small">
      <div style="display: flex; justify-content: space-between">
        <div>
          <span style="width: 30%">报告名称：</span>
          <span>
            <a-input style="width: 70%" v-model:value="exportList.name" />
          </span>
        </div>
        <div>
          <a-input-group compact>
            <a-input style="width: 30%" v-model:value="exportList.caseType" />
            <a-input-number style="width: 20%" v-model:value="exportList.caseNumber" :min="1" />
            <span class="rise">起</span>
          </a-input-group>
        </div>
        <div v-if="view === '1'">
          <span style="width: 30%">日期范围：</span>
          <a-space direction="vertical" :locale="zhCN">
            <!-- <a-range-picker @change="pickerChange" :format="dateFormat" /> -->
            <pickers @setTime="pickerChange" />
          </a-space>
        </div>
        <div v-else>
          <span style="width: 30%">日期：</span>
          <a-month-picker @change="pickerChange" />
        </div>
        <div>
          <span style="width: 30%">报告期数：</span>
          <span>
            <a-input-number style="width: 30%" v-model:value="exportList.qs" :min="1" />
          </span>
        </div>
      </div>
    </a-card>
    <a-card size="small">
      <a-upload-dragger
        :disabled="
          !exportList.name || !exportList.minDate || !exportList.qs || !exportList.caseNumber
        "
        :data="exportList"
        :remove="handleRemove"
        :file-list="fileList"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <div @click="uploadClick">
          <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
          </p>
          <p class="ant-upload-text">上传EXCEL文档</p>
          <p class="ant-upload-hint">把文件拖入指定区域，完成上传，同样支持点击上传。</p>
        </div>
      </a-upload-dragger>
    </a-card>
    <div style="width: 100%; text-align: center">
      <a-button
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 20px"
        @click="customRequest"
      >
        {{ uploading ? '生成中' : '生成报告' }}
      </a-button>
    </div>
  </page-container>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { InboxOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
// import { Moment } from 'moment';
// import { downloadWord } from '@/utils/download';
import request from '@/utils/request';
import moment from 'moment';
import pickers from '@/components/s-picker/picker.vue';
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  preview?: string;
  originFileObj?: any;
  file: string | Blob;
}

export default defineComponent({
  components: {
    InboxOutlined,
    DownloadOutlined,
    pickers,
  },
  setup() {
    const url = (window as any).g.baseURL;

    const fileList = ref<FileItem[]>([]);
    const view = ref<string>('1');
    const uploading = ref<boolean>(false);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const dateFormats = 'YYYY-MM';
    const exportList = ref<any>({
      minDate: '',
      maxDate: '',
      qs: null,
      caseType: '电话报警',
      caseNumber: null,
    });

    //时间选择器
    const pickerChange = val => {
      if (view.value === '1') {
        exportList.value.minDate = val[0] ? val[0] : '';
        exportList.value.maxDate = val[1] ? val[1] : '';
      } else {
        exportList.value.minDate = val ? val.format(dateFormats) + '-01 00:00:00' : '';
        exportList.value.maxDate = val ? moment(val).endOf('month').format(dateFormat) : '';
      }
    };
    //报告切换
    const viewChange = () => {
      exportList.value.minDate = '';
      exportList.value.maxDate = '';
    };

    const uploadClick = () => {
      if (
        !exportList.value.name ||
        !exportList.value.minDate ||
        !exportList.value.qs ||
        !exportList.value.caseNumber
      ) {
        message.warning('请填写报告名称、数量、日期与期数！');
      }
    };

    const customRequest = () => {
      if (
        !exportList.value.name ||
        !exportList.value.minDate ||
        !exportList.value.qs ||
        !exportList.value.caseNumber
      ) {
        return message.warning('请填写报告名称、数量、日期与期数！');
      }
      uploading.value = true;
      const formData = new FormData();
      formData.append('minDate', exportList.value.minDate);
      formData.append('maxDate', exportList.value.maxDate);
      fileList.value.forEach((file: FileItem) => {
        formData.append('files[]', file.originFileObj);
      });
      formData.append('qs', exportList.value.qs);
      formData.append('name', exportList.value.name);
      formData.append('type', view.value);
      formData.append('caseType', exportList.value.caseType);
      formData.append('caseNumber', exportList.value.caseNumber);

      postJsonDownload(url + '/report/importPcsExcel', formData).then(res => {
        const resCode = ref<any>(res);
        if (resCode.value.code == 200) {
          window.location.href = url + '/report/download' + '?id=' + resCode.value.data.fileName;
          message.success('报告导出成功！');
        }
        fileList.value = [];
        uploading.value = false;
      });
    };

    const postJsonDownload = (url, data) => {
      return request({
        method: 'post',
        url,
        data,
      });
    };

    const handleRemove = (file: FileItem) => {
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };

    const beforeUpload = (file: FileItem) => {
      fileList.value = [...fileList.value, file];
      return false;
    };

    const handleChange = info => {
      let resFileList = [...info.fileList];
      resFileList = resFileList.slice(-2);
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      fileList.value = resFileList;
    };

    const templateClick = () => {
      window.location.href = url + '/report/downloadPcsTemplate';
    };

    return {
      url,
      view,
      zhCN,
      fileList,
      dateFormat,
      exportList,
      uploadClick,
      pickerChange,
      customRequest,
      handleRemove,
      beforeUpload,
      uploading,
      handleChange,
      viewChange,
      templateClick,
    };
  },
});
</script>
<style lang="less" scoped>
.rise {
  width: 40px;
  margin-top: 2px;
  font-size: 16px;
  text-align: center;
}
</style>
